<template>
  <div class="container">
    <p>X 轴：{{ x }} Y 轴：{{ y }}</p>
    <hr />
    <div>
      <p>{{ count }}</p>
      <button @click="add()">自增</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      // !#Fn1
      x: 0,
      y: 0,
      // ?#Fn2
      count: 0,
    }
  },
  mounted() {
    // !#Fn1
    document.addEventListener('mousemove', this.move)
  },
  methods: {
    // !#Fn1
    move(e) {
      this.x = e.pageX
      this.y = e.pageY
    },
    // ?#Fn2
    add() {
      this.count++
    },
  },
  destroyed() {
    // !#Fn1
    document.removeEventListener('mousemove', this.move)
  },
}
</script>